<template>
  <div class="marketingChannelAnalysis-container">
    <div class="content-container">
      <div class="naviga">
        <span>营销能力分析&nbsp;></span>
        <span class="setColor">营销渠道监控与跟踪</span>
      </div>
      <div class="mainPage" style="background-color: #E0E8EF">
        <div class="summaryHeader">
          <span style="margin-right: 5px;">
            <img src="../../../../images/wicon.png" alt>
          </span>
          <span>监控</span>
          <span class="lightYellow">{{baseInfoMarket.cityNumber}}</span>个城市，
          <span class="lightYellow">{{baseInfoMarket.shopNumber}}</span>个终端门店，
          <span class="lightYellow">{{baseInfoMarket.onLineShopNumber}}</span>个电商平台
        </div>
        <div class="whiteContainer">
          <div class="contentHeader">
            <div style="font-weight:bolder;color:#212121;">
              <b>监控与预警</b>(
              <b style="color:#606266;font—weight:bolder;">{{prodCtrolMonitor.totalRecord || 0}}个预警</b>)
            </div>
            <div class="watchSet" @click="controlDialogSetMarket">监控设置</div>
          </div>
          <div class="sourceContainer">
            <div class="sourceHeader">
              <div class="conditionContainer flex-container space-between" v-if="analysisSwicth">
                <div class="flex-item">
                  <el-form
                    :inline="true"
                    :model="analysisSetInitParam"
                    class="demo-form-inline single-form-inline"
                    size="small"
                  >
                    <el-form-item label="监控指标">
                      <el-cascader
                        :options="controlTargetSearch"
                        placeholder="监控指标"
                        v-model="analysisSetInitParam.inputdata"
                        style="width: 145px;"
                      ></el-cascader>
                    </el-form-item>
                    <el-form-item label="监控周期">
                      <el-select
                        v-model="analysisSetInitParam.monitoringCycle"
                        @change="onControlDurationChange"
                        placeholder="监控周期"
                      >
                        <el-option label="全部" value="全部"></el-option>
                        <el-option label="月" value="月"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="异常时间段" v-if="analysisSetInitParam.monitoringCycle == '月'">
                      <el-date-picker
                        @change="controlMonthTimeChange"
                        size="small"
                        value-format="yyyy-MM"
                        v-model="analysisSetInitParam.monitorTime"
                        type="month"
                        placeholder="异常时间段"
                      ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="预警时间">
                      <el-date-picker
                        v-model="analysisSetInitParam.controlValueTime"
                        type="daterange"
                        size="small"
                        align="center"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="flex-item">
                  <el-button type="text" @click="onSubmitSelectInit(0)">查询门店编号/名称</el-button>
                </div>
              </div>
              <div class="conditionContainer flex-container space-between" v-else>
                <div class="flex-item">
                  <el-form
                    :inline="true"
                    :model="controlSetCodeName"
                    class="demo-form-inline"
                    size="small"
                  >
                    <el-form-item label="查询型号">
                      <el-select
                        v-model="controlSetCodeName.controlBrand"
                        placeholder="查询型号"
                        style="width: 150px;"
                      >
                        <el-option label="门店编号" value="门店编号"></el-option>
                        <el-option label="门店名称" value="门店名称"></el-option>
                        <el-option label="渠道名称" value="渠道名称"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-input v-model="controlSetCodeName.controlProdCode" placeholder="输入查询参数"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="onSubmitByCodeName(controlSetCodeName)">查询</el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="flex-item">
                  <el-button type="text" @click="onSubmitSelectInit(1)">组合查询</el-button>
                </div>
              </div>
            </div>
            <div class="tableContainer" style="margin: 0 12px">
              <el-table
                :data="prodCtrolMonitor.prodCtrol"
                stripe
                border
                class="setHeight"
                size="mini"
                style="width: 100%"
              >
                <el-table-column prop="showCode" label="终端编号" width="100"></el-table-column>
                <el-table-column prop="monitorTime" label="预警时间" min-width="150"></el-table-column>
                <el-table-column prop="showName" label="名称" min-width="180"></el-table-column>
                <el-table-column prop="monitoringIndex" label="监控指标" width="95"></el-table-column>
                <el-table-column prop="monitoringCycle" label="监控周期" width="80"></el-table-column>
                <el-table-column prop="monitor" label="监控指标值" width="120"></el-table-column>
                <el-table-column prop="indexValue" label="预警值" width="120"></el-table-column>
                <el-table-column label="差值" width="120">
                  <template slot-scope="scope">
                    <span
                      :style="{'color': parseInt(scope.row.dValue) > 0 ? '#606266':'red'}"
                    >{{scope.row.dValue }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="差值比" width="120">
                  <template slot-scope="scope">
                    <span
                      :style="{'color': parseInt(scope.row.differenceRatio) > 0 ? '#606266':'red'}"
                    >{{scope.row.differenceRatio }}</span>
                  </template>
                </el-table-column>
                <el-table-column min-width="165" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      @click.native.prevent="detailRowSet(scope.row)"
                      type="text"
                      size="small"
                    >详情</el-button>
                    <el-button
                      @click.native.prevent="pushRowSet(scope.row)"
                      type="text"
                      size="small"
                    >推送</el-button>
                    <el-button
                      @click.native.prevent="analysisRowSet(scope.row)"
                      type="text"
                      size="small"
                    >异常分析</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="paginationSet">
              <div class="pagination-container">
                <div class="toStart" @click="handleCurChange(1)">首页</div>
                <el-pagination
                  background
                  layout="prev, pager, next"
                  @current-change="handleCurChange"
                  :current-page.sync="prodCtrolMonitor.currentPage"
                  :total="prodCtrolMonitor.totalRecord"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  Dialog容器  -->
    <div class="dialog-container">
      <!--  预警监控列表Dialog  -->
      <div class="earlyWarning-dialog dialogHeaderFont">
        <el-dialog width="100%" top="8vh" title="预警监控列表" :visible.sync="controlDialogTableVisible">
          <div class="control-dialog-content">
            <div class="dialog-content-item controlProd">
              <div class="content-item-container titleFont">
                <el-tabs type="border-card" v-model="activeElTab">
                  <el-tab-pane label="线下渠道" name="unLineChannel">
                    <div class="outliterSet-dialog-header" style="margin-bottom: 6px;">
                      <div
                        class="outliterSet-dialog-searchItem"
                        v-show="onlineSearchItemVisible == '0'"
                      >
                        <el-form
                          :inline="true"
                          :model="unLineControlSearch"
                          class="demo-form-inline"
                          size="mini"
                        >
                          <el-form-item label="地区">
                            <el-select
                              @change="regionChange"
                              v-model="unLineControlSearch.region"
                              placeholder="地区"
                              style="width: 135px;"
                            >
                              <el-option
                                v-for="(item,index) in unLineControlParamSet.region"
                                :key="index"
                                :label="item"
                                :value="item"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="省份">
                            <el-select
                              @change="provinceChange"
                              v-model="unLineControlSearch.province"
                              placeholder="省份"
                              style="width: 135px;"
                            >
                              <el-option
                                v-for="(item,index) in unLineControlParamSet.province"
                                :key="index"
                                :label="item"
                                :value="item"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="城市">
                            <el-select
                              @change="cityChange"
                              v-model="unLineControlSearch.city"
                              placeholder="城市"
                              style="width: 135px;"
                            >
                              <el-option
                                v-for="(item,index) in unLineControlParamSet.city"
                                :key="index"
                                :label="item"
                                :value="item"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="渠道">
                            <el-select
                              @change="channelChange"
                              v-model="unLineControlSearch.channel"
                              placeholder="渠道"
                              style="width: 135px;"
                            >
                              <el-option
                                v-for="(item,index) in unLineControlParamSet.channel"
                                :key="index"
                                :label="item"
                                :value="item"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item>
                            <el-button type="primary" @click="onSubmitSwitchOnUn(1)">查询门店编号</el-button>
                          </el-form-item>
                        </el-form>
                      </div>
                      <div
                        class="outliterSet-dialog-searchItem flex-container space-between"
                        v-show="onlineSearchItemVisible == '1'"
                      >
                        <el-form
                          :inline="true"
                          :model="shopNumberSearch"
                          class="demo-form-inline"
                          size="mini"
                        >
                          <el-form-item label="终端编号">
                            <el-input v-model="shopNumberSearch.shopNumber" placeholder="请输入终端编号"></el-input>
                          </el-form-item>
                          <el-form-item>
                            <el-button
                              size="mini"
                              type="primary"
                              @click="onSubmitNumberUnLine(shopNumberSearch)"
                            >查询</el-button>
                          </el-form-item>
                        </el-form>
                        <div>
                          <el-button size="mini" type="primary" @click="onSubmitSwitchOnUn(0)">组合查询</el-button>
                        </div>
                      </div>
                    </div>
                    <div class="pane-container">
                      <el-table
                        :data="channelMetaSet.channelUnLineSet"
                        border
                        ref="unLineTableChannel"
                        highlight-current-row
                        @current-change="handleCurrentChangeUnLine"
                        class="setHeight"
                        style="width: 100%"
                      >
                        <el-table-column prop="shopNumber" label="终端编号" width="90"></el-table-column>
                        <el-table-column prop="shopName" label="终端名称" width="210"></el-table-column>
                        <el-table-column prop="channelName" width="180" label="所属渠道"></el-table-column>
                        <el-table-column prop="city" label="所属城市"></el-table-column>
                        <el-table-column prop="province" label="所属省份"></el-table-column>
                        <el-table-column prop="region" label="所属地区"></el-table-column>
                      </el-table>
                    </div>
                    <div class="paginationSet">
                      <div class="pagination-container">
                        <div class="toStart" @click="handleCurUnChange(1)">首页</div>
                        <el-pagination
                          @current-change="handleCurUnChange"
                          background
                          layout="prev, pager, next"
                          :current-page.sync="channelMetaSet.currentUnPage"
                          :total="channelMetaSet.totalPageUnLine"
                        ></el-pagination>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="线上渠道" name="onLineChannel">
                    <div class="outliterSet-dialog-header" style="margin-bottom: 6px;">
                      <div class="outliterSet-dialog-searchItem">
                        <el-form
                          :inline="true"
                          :model="onLineChannelControl"
                          class="demo-form-inline"
                          size="mini"
                        >
                          <el-form-item label="平台名称">
                            <el-input
                              v-model="onLineChannelControl.channelName"
                              placeholder="输入平台名称"
                            ></el-input>
                          </el-form-item>
                          <el-form-item>
                            <el-button
                              type="primary"
                              @click="onSubmitMetaOnLine(onLineChannelControl)"
                            >查询</el-button>
                          </el-form-item>
                        </el-form>
                      </div>
                    </div>
                    <div class="pane-container">
                      <el-table
                        :data="channelMetaSet.channelOnLineSet"
                        style="width: 100%"
                        highlight-current-row
                        border
                        ref="onLineTableChannel"
                        class="setHeight"
                        @current-change="handleCurrentChangeOnLine"
                      >
                        <el-table-column prop="channelId" label="平台编号"></el-table-column>
                        <el-table-column prop="channelName" label="平台名称"></el-table-column>
                      </el-table>
                    </div>
                    <div class="paginationSet">
                      <div class="pagination-container">
                        <div class="toStart" @click="setCurrentOnPage(1)">首页</div>
                        <el-pagination
                          background
                          layout="prev, pager, next"
                          :current-page.sync="channelMetaSet.currentOnPage"
                          @current-change="setCurrentOnPage"
                          :total="channelMetaSet.totalPageOnLine"
                        ></el-pagination>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <div class="dialog-content-item controlInfo">
              <div class="content-item-container">
                <div class="titleHeader controlProdHeader">渠道监控信息</div>
              </div>
              <div class="controlProdContent">
                <div class="table-container">
                  <el-table
                    stripe
                    :data="channelMetaSet.mineChannelControl"
                    max-height="342"
                    style="width: 100%"
                    border
                    size="mini"
                  >
                    <el-table-column prop="monitorIndex" label="监控指标" width="125"></el-table-column>
                    <el-table-column prop="monitorCycle" label="监控周期" width="125"></el-table-column>
                    <el-table-column label="监控状态" width="125">
                      <template slot-scope="scope">
                        <span
                          v-text="scope.row.monitorStatus"
                          :class="['监控中' == scope.row.monitorStatus ? 'monitorStyle' : 'nomonitorStyle']"
                          v-class
                        ></span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button
                          @click.native.prevent="updateControlRowItem(scope.row)"
                          type="text"
                          size="small"
                        >{{ '监控中' == scope.row.monitorStatus ? '不监控' : '监控'}}</el-button>
                        <el-button
                          type="text"
                          size="small"
                          @click.native.prevent="controlEditRow(scope.row,scope.$index)"
                        >编辑</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
      <!--  详情Dialog  -->
      <detail-dialog :showdialog.sync="detailDialogTableVisible"></detail-dialog>
      <!--  推送Dialog  -->
      <push-dialog :showdialog.sync="pushDialogTableVisible"></push-dialog>
      <!--  异常分析Dialog  -->
      <outlier-analysis-un-line :showdialog.sync="analysisDialogUnLineVisible"></outlier-analysis-un-line>
      <outlier-analysis-on-line :showdialog.sync="analysisDialogOnLineVisible"></outlier-analysis-on-line>
      <!--  监控详情设置Dialog  -->
      <div class="controlSet-dialog dialogHeaderFont">
        <el-dialog
          title="指标监控详情设置"
          width="92%"
          top="8vh"
          :visible.sync="controlSetDialogTableVisible"
        >
          <div class="controlSet-dialog-content">
            <div class="controlSet-dialog-content-item controlSet-content-start">
              <div class="controlSet-content-item">
                <div class="content-item-name">监控状态:</div>
                <div class="content-item-options">
                  <el-radio-group size="mini" v-model="controlEditRowCont.monitoringState">
                    <el-radio-button label="监控中">监控中</el-radio-button>
                    <el-radio-button label="未监控">取消监控</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              <div class="controlSet-content-item">
                <div class="content-item-name">监控指标:</div>
                <div class="content-item-options">
                  <el-button type="text" v-text="controlEditRowCont.monitorIndex"></el-button>
                </div>
              </div>
              <div class="controlSet-content-item">
                <div class="content-item-name">监控周期:</div>
                <div class="content-item-options">
                  <el-select
                    class="selectFont"
                    size="mini"
                    v-model="controlEditRowCont.monitoringCycle"
                    placeholder="请选择"
                  >
                    <el-option
                      class="selectFont"
                      v-for="item in controlCircle"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div class="controlSet-dialog-content-item controlSet-content-center">
              <div class="content-center-small">监控预警值:</div>
              <div class="content-center-max">
                <div class="meanValue content-center-max-item">
                  <div class="titleHeader">
                    <div class="center-max-name flex-container">
                      <div style="margin-right: 12px;">均值:</div>
                      <div v-text="controlEditRowCont.averageValue"></div>
                    </div>
                    <div class="center-max-status">
                      <el-radio-group size="mini" v-model="controlEditRowCont.averageValueStatus">
                        <el-radio-button label="开启">开启</el-radio-button>
                        <el-radio-button label="关闭">关闭</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="center-max-content">
                    <div class="flex-container center-status-item">
                      <div class="flex-container">
                        <div class="status-item-name">大于等于均值时:</div>
                        <div>
                          <el-select
                            class="selectFont"
                            @change="selVal => controlEditRowContChangeSet(selVal,'averageValueAbnormalJudge0','averageValueAbnormalHint0')"
                            v-model="controlEditRowCont.averageValueAbnormalJudge0"
                            placeholder="请选择"
                            size="mini"
                          >
                            <el-option
                              class="selectFont"
                              v-for="item in controlStatus"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                      <div
                        class="flex-container"
                        v-show="controlEditRowCont.averageValueAbnormalJudge0 == '异常'"
                      >
                        <div class="status-item-name">异常提示:</div>
                        <div>
                          <el-input
                            size="mini"
                            v-model="controlEditRowCont.averageValueAbnormalHint0"
                            placeholder="请输入异常提示"
                          ></el-input>
                        </div>
                      </div>
                    </div>
                    <div class="flex-container center-status-item">
                      <div class="flex-container">
                        <div class="status-item-name">小于历史均值时:</div>
                        <div>
                          <el-select
                            class="selectFont"
                            @change="selVal => controlEditRowContChangeSet(selVal,'averageValueAbnormalJudge1','averageValueAbnormalHint1')"
                            v-model="controlEditRowCont.averageValueAbnormalJudge1"
                            placeholder="请选择"
                            size="mini"
                          >
                            <el-option
                              class="selectFont"
                              v-for="item in controlStatus"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                      <div
                        class="flex-container"
                        v-show="controlEditRowCont.averageValueAbnormalJudge1 == '异常'"
                      >
                        <div class="status-item-name">异常提示:</div>
                        <div>
                          <el-input
                            size="mini"
                            v-model="controlEditRowCont.averageValueAbnormalHint1"
                            placeholder="请输入异常提示"
                          ></el-input>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="customValue content-center-max-item">
                  <div class="titleHeader">
                    <div class="center-max-name">自定义阀值</div>
                    <div class="center-max-status">
                      <el-radio-group
                        size="mini"
                        v-model="controlEditRowCont.customizedValueStatus"
                      >
                        <el-radio-button label="开启">开启</el-radio-button>
                        <el-radio-button label="关闭">关闭</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="center-max-content">
                    <div class="flex-container center-status-item">
                      <div class="flex-container">
                        <div class="status-item-name">最大值:</div>
                        <div>
                          <el-input-number
                            style="width: 210px"
                            size="mini"
                            v-model="controlEditRowCont.maxValue"
                            :min="1"
                            :max="2147483647"
                            placeholder="请输入最大值"
                          ></el-input-number>
                        </div>
                        <div>
                          <el-select
                            class="selectFont selectSet"
                            v-model="controlEditRowCont.customizedUnit0"
                            placeholder="请选择"
                            size="mini"
                          >
                            <el-option
                              class="selectFont"
                              v-for="item in controlUnit"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                      <div class="flex-container">
                        <div class="status-item-name">最小值:</div>
                        <div>
                          <el-input-number
                            style="width: 210px"
                            size="mini"
                            v-model="controlEditRowCont.minValue"
                            :min="1"
                            :max="2147483647"
                            placeholder="请输入最小值"
                          ></el-input-number>
                        </div>
                        <div>
                          <el-select
                            class="selectFont selectSet"
                            v-model="controlEditRowCont.customizedUnit1"
                            placeholder="请选择"
                            size="mini"
                          >
                            <el-option
                              class="selectFont"
                              v-for="item in controlUnit"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                    </div>
                    <div class="flex-container center-status-item">
                      <div class="flex-container">
                        <div class="status-item-name">大于最大值时:</div>
                        <div>
                          <el-select
                            class="selectFont"
                            @change="selVal => controlEditRowContChangeSet(selVal,'maxValuedAbnormalJudge','maxValueAbnormalHint')"
                            v-model="controlEditRowCont.maxValuedAbnormalJudge"
                            placeholder="请选择"
                            size="mini"
                          >
                            <el-option
                              class="selectFont"
                              v-for="item in controlStatus"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                      <div
                        class="flex-container"
                        v-show="controlEditRowCont.maxValuedAbnormalJudge == '异常'"
                      >
                        <div class="status-item-name">异常提示:</div>
                        <div>
                          <el-input
                            size="mini"
                            v-model="controlEditRowCont.maxValueAbnormalHint"
                            placeholder="请输入异常提示"
                          ></el-input>
                        </div>
                      </div>
                    </div>
                    <div class="flex-container center-status-item">
                      <div class="flex-container">
                        <div class="status-item-name">小于最小值时:</div>
                        <div>
                          <el-select
                            class="selectFont"
                            @change="selVal => controlEditRowContChangeSet(selVal,'minValuedAbnormalJudge','minValueAbnormalHint')"
                            v-model="controlEditRowCont.minValuedAbnormalJudge"
                            placeholder="请选择"
                            size="mini"
                          >
                            <el-option
                              class="selectFont"
                              v-for="item in controlStatus"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                      <div
                        class="flex-container"
                        v-show="controlEditRowCont.minValuedAbnormalJudge == '异常'"
                      >
                        <div class="status-item-name">异常提示:</div>
                        <div>
                          <el-input
                            size="mini"
                            v-model="controlEditRowCont.minValueAbnormalHint"
                            placeholder="请输入异常提示"
                          ></el-input>
                        </div>
                      </div>
                    </div>
                    <div class="flex-container center-status-item">
                      <div class="flex-container">
                        <div class="status-item-name">大于最大值小于最小值时:</div>
                        <div>
                          <el-select
                            class="selectFont"
                            @change="selVal => controlEditRowContChangeSet(selVal,'medianValuedAbnormalJudge','medianValueAbnormalHint')"
                            v-model="controlEditRowCont.medianValuedAbnormalJudge"
                            placeholder="请选择"
                            size="mini"
                          >
                            <el-option
                              class="selectFont"
                              v-for="item in controlStatus"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                      <div
                        class="flex-container"
                        v-show="controlEditRowCont.medianValuedAbnormalJudge == '异常'"
                      >
                        <div class="status-item-name">异常提示:</div>
                        <div>
                          <el-input
                            size="mini"
                            v-model="controlEditRowCont.medianValueAbnormalHint"
                            placeholder="请输入异常提示"
                          ></el-input>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="controlSet-dialog-content-item controlSet-content-end">
              <div class="controlSet-content-operate">
                <el-button
                  size="medium"
                  @click="mineControlSetSure(controlEditRowCont)"
                  :loading="mineControlSetSureStatus"
                >确 定</el-button>
                <el-button size="medium" @click="mineControlSetCancel">取 消</el-button>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import DetailDialog from "./detailDialog";
import PushDialog from "./pushDialog";
import OutlierAnalysisUnLine from "./outlierAnalysisUnLine";
import OutlierAnalysisOnLine from "./outlierAnalysisOnLine";
import { mapGetters, mapMutations, mapActions } from "vuex";
import * as opreate from "api/getData";
import { controlCircle, controlStatus, controlUnit } from "api/config";
let paramSet = {
  inputdata: ["线下", "全部"],
  monitoringCycle: "全部",
  monitorTime: "",
  controlValueTime: ""
};

export default {
  name: "marketing-channel-analysis",
  data() {
    return {
      controlTargetSearch: [
        {
          value: "线下",
          label: "线下",
          children: [
            {
              value: "全部",
              label: "全部"
            },
            {
              value: "销售额",
              label: "销售额"
            },
            {
              value: "销售量",
              label: "销售量"
            }
          ]
        },
        {
          value: "线上",
          label: "线上",
          children: [
            {
              value: "全部",
              label: "全部"
            },
            {
              value: "销售额",
              label: "销售额"
            },
            {
              value: "销售量",
              label: "销售量"
            }
          ]
        }
      ],
      activeElTab: "unLineChannel",
      controlCircle: controlCircle,
      controlStatus: controlStatus,
      controlUnit: controlUnit,
      yearCurrent: new Date().getFullYear(),
      monthCurrent: new Date().getMonth(),
      prodCtrolMonitor: { prodCtrol: [], totalRecord: 0, currentPage: 0 },
      unLineControlSearch: {
        region: "全部",
        province: "全部",
        city: "全部",
        channel: "全部"
      },
      unLineControlParamSet: {
        region: [],
        province: [],
        city: [],
        channel: []
      },
      pickerOptions: { disabledDate: true },
      analysisSwicth: true,
      controlSetCodeName: { controlBrand: "门店编号", controlProdCode: "" },
      analysisSetInitParam: {
        inputdata: ["线下", "全部"],
        monitoringCycle: "全部",
        monitorTime: "",
        controlValueTime: ""
      },
      channelMetaSet: {
        channelOnLineSet: [],
        channelUnLineSet: [],
        mineChannelControl: [],
        totalPageOnLine: 1,
        totalPageUnLine: 1,
        currentUnPage: 1,
        currentOnPage: 1
      },
      paramControlOnLineSearch: {},
      controlEditRowCont: {},
      baseInfoMarket: {},
      shopNumberSearch: { shopNumber: "" },
      onLineChannelControl: { channelName: "" },
      onlineSearchItemVisible: 0,
      mineControlSetSureStatus: false,
      controlDialogTableVisible: false,
      detailDialogTableVisible: false,
      pushDialogTableVisible: false,
      analysisDialogUnLineVisible: false,
      analysisDialogOnLineVisible: false,
      controlSetDialogTableVisible: false
    };
  },
  components: {
    OutlierAnalysisOnLine,
    DetailDialog,
    PushDialog,
    OutlierAnalysisUnLine
  },
  mounted() {
    this.initAreaRangeSolve();
    this.getBaseInfoMarket();
    this.initStateSelectParams();
  },
  methods: {
    ...mapMutations([
      "updateProdCtrolStateInfo",
      "updateCompareUnLineMarketing",
      "updateCompareOnLineMarketing"
    ]),
    keypressChange(nameSet) {
      let tempSet = this.controlEditRowCont[nameSet];
      if (isNaN(Number(tempSet))) {
        this.controlEditRowCont[nameSet] = tempSet.replace(/\D/g, "");
      }
    },
    getBaseInfoMarket() {
      opreate.getShopCount().then(res => {
        this.baseInfoMarket = res.data || {};
      });
    },
    limitSet: function(time) {
      return (
        time.getTime() <
          new Date(this.yearCurrent, this.monthCurrent, 1).getTime() ||
        time.getTime() >
          new Date(this.yearCurrent, this.monthCurrent + 1, 0).getTime()
      );
    },
    getShopOrChannelMata(paramSearch) {
      opreate
        .getChannelDataByIndex(paramSearch)
        .then(res => {
          let { list = [], totalRecord = 0, currentPage = 0 } = res.data || {};
          list = list.map(v => {
            let unitSet =
              "销售额" == v.monitoringIndex
                ? "元"
                : "销售量" == v.monitoringIndex
                  ? "件"
                  : "";
            let tempSet =
              "销售量" == v.monitoringIndex
                ? {
                    monitor: `${parseFloat(v.monitor).toFixed(0)}${unitSet}`,
                    indexValue: `${v.indexValue}${unitSet}`,
                    dValue: `${parseFloat(v.dValue).toFixed(0)}${unitSet}`
                  }
                : {
                    monitor: `${v.monitor}${unitSet}`,
                    indexValue: `${v.indexValue}${unitSet}`,
                    dValue: `${v.dValue}${unitSet}`
                  };
            return Object.assign(v, tempSet);
          });
          this.prodCtrolMonitor = { totalRecord, currentPage, prodCtrol: list };
        })
        .catch(err => {
          console.error(err);
        });
    },
    initStateSelectParams() {
      this.getShopOrChannelMata(paramSet);
    },
    controlDialogSetMarket() {
      this.controlDialogTableVisible = true;
    },
    onSubmitSelectInit(flag) {
      this.analysisSwicth = Boolean(flag);
    },

    onControlDurationChange(newVal) {
      Object.assign(this.analysisSetInitParam, {
        controlValueTime: "",
        monitorTime: ""
      });
      "all" == newVal ? (this.pickerOptions.disabledDate = true) : "";
    },
    controlMonthTimeChange(newVal) {
      if (newVal) {
        let setParam = newVal.split("-");
        this.yearCurrent = parseInt(setParam[0]);
        this.monthCurrent = parseInt(setParam[1]) - 1;
        this.pickerOptions.disabledDate = this.limitSet;
      } else {
        this.pickerOptions.disabledDate = true;
      }
    },
    handleCurChange(pageNumber) {
      if (this.analysisSwicth) {
        this.getShopOrChannelMata({ pageNumber, ...this.analysisSetInitParam });
      } else {
        this.onSubmitByCodeName({ pageNumber, ...this.controlSetCodeName });
      }
    },
    handleCurUnChange(pageNumber) {
      if (Boolean(this.onlineSearchItemVisible)) {
        this.onSubmitNumberUnLine({ pageNumber, ...this.shopNumberSearch });
      } else {
        this.obtainUnlineControl({ pageNumber, ...this.unLineControlSearch });
      }
    },
    setCurrentOnPage(pageNumber) {
      this.onSubmitMetaOnLine(
        { pageNumber, ...this.onLineChannelControl },
        true
      );
    },
    onSubmitByCodeName(searchParam = {}) {
      let { controlBrand, controlProdCode, pageNumber } = searchParam;
      let searchParamSet = { shopNumber: "" };
      switch (controlBrand) {
        case "门店名称":
          searchParamSet = { shopName: controlProdCode };
          break;
        case "渠道名称":
          searchParamSet = { channelName: controlProdCode };
          break;
        default:
          searchParamSet = { shopNumber: controlProdCode };
          break;
      }
      opreate
        .monitorSearchParams({ pageNumber, ...searchParamSet })
        .then(res => {
          let { list, totalRecord, currentPage } = res.data || {};
          this.prodCtrolMonitor = {
            prodCtrol: list || [],
            totalRecord: totalRecord || 0,
            currentPage: currentPage || 0
          };
        })
        .catch(err => {
          console.error(err);
        });
    },
    detailRowSet(row) {
      this.updateProdCtrolStateInfo(row);
      this.detailDialogTableVisible = true;
    },
    pushRowSet(row) {
      this.updateProdCtrolStateInfo(row);
      this.pushDialogTableVisible = true;
    },
    analysisRowSet(rowSet) {
      let { channelId, shopId } = rowSet;
      if (shopId) {
        opreate.monitorUnLineSearchParams(rowSet).then(res => {
          if (200 == res.code) {
            this.updateCompareUnLineMarketing({
              payload: new Array(res.data),
              flag: true
            });
            this.analysisDialogUnLineVisible = true;
          } else {
            this.$message.success("错了哦，查询出错");
          }
        });
      } else {
        opreate.monitorOnLineSearchParams(rowSet).then(res => {
          if (200 == res.code) {
            this.updateCompareOnLineMarketing({
              payload: new Array(res.data),
              flag: true
            });
            this.analysisDialogOnLineVisible = true;
          } else {
            this.$message.success("错了哦，查询出错");
          }
        });
      }
    },
    controlEditRow(rowSet, $index) {
      const {
        monitorStatus,
        monitorIndex,
        shopId,
        channelId,
        channelName,
        shopName,
        shopNumber
      } = rowSet;
      let tempSet = shopId
        ? {
            monitorIndex,
            shopId,
            shopName,
            shopNumber,
            monitoringState: monitorStatus
          }
        : {
            monitorIndex,
            channelId,
            channelName,
            monitoringState: monitorStatus
          };
      opreate
        .getIndexAverageValue(tempSet)
        .then(res => {
          if (200 == res.code) {
            this.controlEditRowCont = Object.assign(res.data, {
              indexSet: $index
            }) || { indexSet: $index };
            this.controlSetDialogTableVisible = true;
          } else {
            this.$message.error("查询失败，请稍后再试");
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    onSubmitSwitchOnUn(newVal) {
      Boolean(newVal)
        ? this.onSubmitNumberUnLine(this.shopNumberSearch)
        : this.obtainUnlineControl(this.unLineControlSearch);
      this.onlineSearchItemVisible = newVal;
    },
    onSubmitNumberUnLine(param = {}) {
      opreate
        .monitorNumberChannel(param)
        .then(res => {
          let { list, totalRecord, currentPage } = res.data || {};
          this.channelMetaSet.channelUnLineSet = list || [];
          this.channelMetaSet.totalPageUnLine = totalRecord || 0;
          this.channelMetaSet.currentUnPage = currentPage || 0;
          if (list.length > 0) {
            let { shopId, channelId, shopName, shopNumber } = list[0] || {};
            this.$refs.unLineTableChannel != undefined
              ? this.$refs.unLineTableChannel.setCurrentRow(list[0])
              : "";
            opreate
              .getMonitorbyShopNumber({
                shopId,
                channelId,
                shopName,
                shopNumber
              })
              .then(res => {
                this.channelMetaSet.mineChannelControl = res.data || [];
              })
              .catch(err => {
                console.error(err);
              });
          } else {
            this.channelMetaSet.mineChannelControl = [];
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    onSubmitMetaOnLine(param = {}, flag = true) {
      opreate
        .getChannelOnLineControl(param)
        .then(res => {
          let { list = [], totalRecord, currentPage } = res.data || {};
          this.channelMetaSet.channelOnLineSet = list || [];
          this.channelMetaSet.totalPageOnLine = totalRecord || 0;
          this.channelMetaSet.currentOnPage = currentPage || 0;
          if (list.length > 0 && flag) {
            this.$refs.onLineTableChannel != undefined
              ? this.$refs.onLineTableChannel.setCurrentRow(list[0])
              : "";
            let { shopId, channelId, channelName } = list[0] || {};
            opreate
              .getMonitorbyShopNumber({ shopId, channelId, channelName })
              .then(res => {
                this.channelMetaSet.mineChannelControl = res.data || [];
              })
              .catch(err => {
                console.error(err);
              });
          } else {
            this.channelMetaSet.mineChannelControl = [];
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    obtainUnlineControl(
      param = {
        region: "全部",
        province: "全部",
        city: "全部",
        channelName: "全部"
      }
    ) {
      opreate
        .getshopMonitorData(param)
        .then(res => {
          let { list = [], totalRecord, currentPage } = res.data || {};
          this.channelMetaSet.totalPageUnLine = totalRecord || 0;
          this.channelMetaSet.channelUnLineSet = list || [];
          this.channelMetaSet.currentUnPage = currentPage || 0;
          if (list.length > 0) {
            this.$refs.unLineTableChannel != undefined
              ? this.$refs.unLineTableChannel.setCurrentRow(list[0])
              : "";
            let { shopId, channelId, shopName, shopNumber } = list[0] || {};
            opreate
              .getMonitorbyShopNumber({
                shopId,
                channelId,
                shopName,
                shopNumber
              })
              .then(res => {
                this.channelMetaSet.mineChannelControl = res.data || [];
              })
              .catch(err => {
                console.error(err);
              });
          } else {
            this.channelMetaSet.mineChannelControl = [];
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    initAreaRangeSolve() {
      this.onSubmitMetaOnLine({}, false);
      this.obtainUnlineControl();
      Promise.all([
        opreate.getChannelRegion(),
        opreate.getChannelProvince({ region: "" }),
        opreate.getChannelCity({ region: "", province: "" }),
        opreate.getShopChannelData({})
      ])
        .then(result => {
          this.unLineControlParamSet = {
            region: ["全部", ...result[0].data],
            province: ["全部", ...result[1].data],
            city: ["全部", ...result[2].data],
            channel: ["全部", ...result[3].data]
          };
        })
        .catch(err => {
          console.error(err);
        });
    },
    handleCurrentChangeOnLine(rowSet) {
      if (rowSet) {
        this.$refs.onLineTableChannel.setCurrentRow(rowSet);
        opreate.getMonitorbyShopNumber(rowSet).then(res => {
          this.channelMetaSet.mineChannelControl = res.data || [];
        });
      }
    },
    handleCurrentChangeUnLine(rowSet) {
      if (rowSet) {
        this.$refs.unLineTableChannel.setCurrentRow(rowSet);
        opreate.getMonitorbyShopNumber(rowSet).then(res => {
          this.channelMetaSet.mineChannelControl = res.data || [];
        });
      }
    },
    regionChange(region) {
      Promise.all([
        opreate.getChannelProvince({ region }),
        opreate.getChannelCity({ region }),
        opreate.getShopChannelData({})
      ])
        .then(result => {
          this.unLineControlParamSet = Object.assign(
            this.unLineControlParamSet,
            {
              province: ["全部", ...result[0].data],
              city: ["全部", ...result[1].data],
              channel: ["全部", ...result[2].data]
            }
          );
          this.unLineControlSearch = Object.assign(this.unLineControlSearch, {
            province: "全部",
            city: "全部",
            channel: "全部"
          });
          this.obtainUnlineControl({
            region,
            province: "",
            city: "",
            channelName: ""
          });
        })
        .catch(err => {
          console.error(err);
        });
    },
    provinceChange(province) {
      let { region } = this.unLineControlSearch;
      Promise.all([
        opreate.getChannelCity({ region, province }),
        opreate.getShopChannelData({})
      ])
        .then(result => {
          this.unLineControlParamSet = Object.assign(
            this.unLineControlParamSet,
            {
              city: ["全部", ...result[0].data],
              channel: ["全部", ...result[1].data]
            }
          );
          this.unLineControlSearch = Object.assign(this.unLineControlSearch, {
            city: "全部",
            channel: "全部"
          });
          this.obtainUnlineControl({
            region,
            province,
            city: "",
            channelName: ""
          });
        })
        .catch(err => {
          console.error(err);
        });
    },
    cityChange(city) {
      let { region, province } = this.unLineControlSearch;
      Promise.all([opreate.getShopChannelData({ city })])
        .then(result => {
          this.unLineControlParamSet = Object.assign(
            this.unLineControlParamSet,
            { channel: ["全部", ...result[0].data] }
          );
          this.unLineControlSearch = Object.assign(this.unLineControlSearch, {
            channel: "全部"
          });
          this.obtainUnlineControl({ region, province, city, channelName: "" });
        })
        .catch(err => {
          console.error(err);
        });
    },
    channelChange(channelName) {
      let { region, province, city } = this.unLineControlSearch;
      this.obtainUnlineControl({ region, province, city, channelName });
    },
    updateControlRowItem(rowSet) {
      const { channelId, shopId, monitorIndex, monitorStatus } = rowSet;
      let tempSet = {
        channelId,
        shopId,
        monitorIndex,
        monitorOperation: "监控中" == monitorStatus ? "不监控" : "监控"
      };
      opreate.updateMonitorIndex(tempSet).then(res => {
        if (200 == res.code) {
          let { indexMonitorStatus, statusDescription, monitorOperation } =
            res.data || {};
          if (indexMonitorStatus) {
            Object.assign(rowSet, {
              monitorOperation,
              monitorStatus: statusDescription
            });
          } else {
            this.$alert("请先前往编辑页面进行编辑", "异常提示", {
              confirmButtonText: "确定",
              callback: action => false
            });
          }
        } else {
          this.$mesasge.error("设置失败，请稍后再试");
        }
      });
    },
    controlEditRowContChangeSet(val, name, nameVal) {
      "正常" == this.controlEditRowCont[name]
        ? (this.controlEditRowCont[nameVal] = "")
        : "";
    },
    mineControlSetCancel() {
      this.controlSetDialogTableVisible = false;
    },
    mineControlSetSure(controlEditSet) {
      if (
        controlEditSet.averageValueAbnormalJudge0 == "异常" &&
        !controlEditSet.averageValueAbnormalHint0
      ) {
        this.$alert("请输入异常提示", "异常提示", {
          confirmButtonText: "确定",
          callback: action => {
            return;
          }
        });
        return;
      } else if (
        controlEditSet.averageValueAbnormalJudge1 == "异常" &&
        !controlEditSet.averageValueAbnormalHint1
      ) {
        this.$alert("请输入异常提示", "异常提示", {
          confirmButtonText: "确定",
          callback: action => {
            return;
          }
        });
        return;
      } else if (
        controlEditSet.maxValuedAbnormalJudge == "异常" &&
        !controlEditSet.maxValueAbnormalHint
      ) {
        this.$alert("请输入异常提示", "异常提示", {
          confirmButtonText: "确定",
          callback: action => {
            return;
          }
        });
        return;
      } else if (
        controlEditSet.minValuedAbnormalJudge == "异常" &&
        !controlEditSet.minValueAbnormalHint
      ) {
        this.$alert("请输入异常提示", "异常提示", {
          confirmButtonText: "确定",
          callback: action => {
            return;
          }
        });
        return;
      } else if (
        controlEditSet.medianValuedAbnormalJudge == "异常" &&
        !controlEditSet.medianValueAbnormalHint
      ) {
        this.$alert("请输入异常提示", "异常提示", {
          confirmButtonText: "确定",
          callback: action => {
            return;
          }
        });
        return;
      } else {
        opreate
          .monitorSaveChannel(controlEditSet)
          .then(res => {
            if (200 == res.code) {
              let { indexSet } = controlEditSet;
              this.channelMetaSet.mineChannelControl[indexSet]
                ? (this.channelMetaSet.mineChannelControl[
                    indexSet
                  ].monitorStatus =
                    controlEditSet.monitoringState)
                : "";
              this.$message.success("设置成功");
            } else {
              this.$message.error("设置失败，请稍后再试");
            }
            this.controlSetDialogTableVisible = false;
          })
          .catch(err => {
            console.error(err);
          });
      }
    }
  },
  watch: {
    activeElTab(newVal) {
      let { channelOnLineSet, channelUnLineSet } = this.channelMetaSet;
      let paramSearch =
        "onLineChannel" == newVal
          ? channelOnLineSet[0] || null
          : channelUnLineSet[0] || null;
      if (paramSearch) {
        let {
          shopId,
          channelId,
          shopNumber,
          shopName,
          channelName
        } = paramSearch;
        "onLineChannel" == newVal
          ? this.$refs.onLineTableChannel.setCurrentRow(paramSearch)
          : this.$refs.unLineTableChannel.setCurrentRow(paramSearch);
        opreate
          .getMonitorbyShopNumber({
            shopId,
            channelId,
            shopNumber,
            shopName,
            channelName
          })
          .then(res => {
            this.channelMetaSet.mineChannelControl = res.data || [];
          })
          .catch(err => {
            console.error(err);
          });
      } else {
        this.channelMetaSet.mineChannelControl = [];
      }
    },
    controlDialogTableVisible(newVal) {
      if (newVal) {
        let { channelOnLineSet, channelUnLineSet } = this.channelMetaSet;
        this.$nextTick(() => {
          channelOnLineSet[0]
            ? this.$refs.onLineTableChannel.setCurrentRow(channelOnLineSet[0])
            : "";
          channelUnLineSet[0]
            ? this.$refs.unLineTableChannel.setCurrentRow(channelUnLineSet[0])
            : "";
        });
      }
    },
    analysisSetInitParam: {
      deep: true,
      handler(newVal) {
        this.getShopOrChannelMata(newVal);
      }
    },
    analysisSwicth(newVal) {
      if (newVal) {
        this.getShopOrChannelMata(this.analysisSetInitParam);
      } else {
        this.onSubmitByCodeName(this.controlSetCodeName);
      }
    }
  }
};
</script>

<style scoped>
.whiteContainer {
  margin: 0 12px;
  padding: 0 12px;
}
.titleHeader {
  font-weight: bold;
}
.sourceContainer {
  border: 1px solid #e3e2e2;
}

.contentHeader {
  display: flex;
  justify-content: space-between;
  height: 50px;
  align-items: center;
}
.watchSet {
  width: 94px;
  background: #1bb4e4;
  height: 30px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  cursor: pointer;
}
.sourceHeader {
  background: #e0e8ef !important;
  margin-bottom: 12px;
  padding: 0 10px;
}
.single-form-inline {
  display: flex;
  justify-content: space-between;
  background: #e0e8ef !important;
  align-items: center;
  height: 40px;
}
.single-form-inline .el-select {
  width: 130px;
}
.single-form-inline .el-date-editor {
  width: 240px;
}
.single-form-inline .el-date-editor--month {
  width: 130px;
}
.single-form-inline .el-form-item-set {
  margin: 0 0 2px 0;
}
.input-with-select .el-select {
  width: 120px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

/**
* @desc: This is Note
* 监控设置Dialog
* @author: WJ
* @date: 2018/09/26 10:50:07
**/
.control-dialog-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.dialog-content-item {
  border: 1px solid #e0e8ef;
}
.controlProd {
  width: 60%;
}
.controlInfo {
  width: 39%;
  background-color: #ffffff;
}
.controlProdContent {
  padding: 10px;
  background: white;
}
.control-form-inline {
  display: flex;
  justify-content: space-between;
}
.control-dialog-content .el-form-item {
  margin-bottom: 8px;
}
.controlProdSel .el-select {
  width: 120px;
}

/**
* @desc: This is Note
* 监控详情设置Dialog
* @author: WJ
* @date: 2018/09/26 18:01:29
**/
.controlSet-dialog-content {
  display: flex;
  flex-direction: column;
  background: white;
}
.controlSet-content-item {
  display: flex;
  height: 40px;
  align-items: center;
}
.controlSet-content-start {
  border-bottom: 1px solid #e0e8ef;
}
.controlSet-content-center {
  display: flex;
  padding: 12px;
}
.controlSet-content-center .titleHeader {
  justify-content: space-between;
}
.content-item-name {
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
.content-item-options {
  display: flex;
  align-items: center;
  height: 40px;
}
.content-item-options label {
  margin: 0 !important;
}
.content-center-small {
  padding: 0 10px 0 0;
}
.content-center-max {
  flex: 1;
}
.content-center-max-item {
  border: 1px solid #e0e8ef;
  border-radius: 4px;
}
.customValue {
  margin: 12px 0;
}
.center-max-content {
  padding: 10px 0;
}
.center-status-item {
  height: 40px;
}
.status-item-name {
  padding: 0 12px;
}
.selectSet {
  width: 94px !important;
  margin-left: 12px;
}
.controlSet-content-end {
  display: flex;
  justify-content: center;
  padding-bottom: 12px;
}
.controlSet-content-operate {
  width: 240px;
  display: flex;
  justify-content: space-between;
}
/**
* @desc: This is Note
* 监控状态动态样式
* @author: qinlin
* @date: 2019/04/7 18:01:29
**/
.monitorStyle {
  background-color: #2fc973;
  padding: 20px 16px;
  color: #fff;
  border-radius: 8px;
}
.nomonitorStyle {
  background-color: #a4b5c2;
  padding: 20px 16px;
  color: #fff;
  border-radius: 8px;
}
</style>
